<html>

<head>
    <title>Create a new project</title>
    <script type="module">
        import { store } from "/components/projects/projects-store.js";
    </script>
</head>

<body>
    <div x-data>
        <template x-if="$store.projects && $store.projects.selectedProject">
            <div>
                <!-- <div class="project-detail-header">
                        <div class="projects-project-card-title">Project details</div>
                        <div class="project-path" x-text="$store.projects.selectedProject.path"></div>
                    </div> -->

                <div class="projects-form-group">
                    <label class="projects-form-label">Non-sensitive variables</label>
                    <span class="projects-form-description">tore non-sensitive variables in .env format e.g.
                        EMAIL_IMAP_SERVER="imap.gmail.com", one item per line. You can use comments starting with # to
                        add descriptions for the agent. See <a
                            href="javascript:openModal('settings/secrets/example-vars.html')">example</a>.
                        <br>
                        These variables are visible to LLMs and in chat history, they are not being masked.</span>
                    <textarea class="projects-form-textarea" x-model="$store.projects.selectedProject.variables"
                        rows="10" placeholder="Enter project variables"></textarea>
                </div>

                <div class="projects-form-group">
                    <label class="projects-form-label">Sensitive variables</label>
                    <span class="projects-form-description">
                        Store secrets and credentials in .env format e.g. EMAIL_PASSWORD="s3cret-p4$$w0rd", one item per
                        line. You can use comments starting with # to add descriptions for the agent. See <a
                            href="javascript:openModal('settings/secrets/example-secrets.html')">example</a>.<br>These
                        variables are not visile to LLMs and in chat history, they are being masked. ⚠️ only values with
                        length &gt;= 4 are being masked to prevent false positives.
                    </span>
                    <textarea class="projects-form-textarea"
                        x-model="$store.projects.selectedProject.secrets" rows="10"
                        placeholder="Enter project secrets"></textarea>
                </div>
            </div>


        </template>
    </div>
</body>
<style>
</style>

</html>